<!DOCTYPE html>
<!--suppress ALL-->
<html lang="en"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.thymeleaf.org"
      layout:decorator="layout/master">
<body layout:fragment="content">
<!-- 分类、品牌、店铺css -->
<link rel="stylesheet" type="text/css" href="/css/zy_main.css">
<input type="hidden" id="goodsSign" th:value="${req.goodsId}">
<input type="hidden" id="searchId" th:value="${req.searchId}">
<input type="hidden" id="hidShare">
<header class="zy_search_top_box zy_goods_top_box">
    <div class="zy_title_top fix">
        <div class="one" href="javascript:" onclick="history.back();"><img src="/images/back_jt.png"></div>
        <h1 style="opacity: 0;">商品详情</h1>
        <!-- slider-pagination -->
        <div class="r">
            <span><img src="/images/web/zy_icon_menu.png"></span>
            <dl>
                <dt></dt>
                <dd><i><img src="/images/menu_icon01.png"></i><a href="/">首页</a></dd>
                <dd><i><img src="/images/menu_icon02.png"></i><a href="/product/category">分类</a></dd>
                <dd><i><img src="/images/menu_icon04.png"></i><a href="/center">会员中心</a></dd>
            </dl>
        </div>
        <script type="text/javascript">
            $(function () {
                // $(".zy_title_top .r dl").hide()
                $(".zy_title_top .r span").mousedown(
                    function (event) {
                        $(".zy_title_top .r dl").fadeToggle()
                        event.stopPropagation();//阻止冒泡
                    }
                )
                $("html,body").mousedown(
                    function () {
                        $(".zy_title_top .r dl").fadeOut()
                    }
                )
            })
        </script>
    </div>
</header>
<div class="top_zhanwei_box"></div>
<script type="text/javascript">
    $(function () {
        var top_h = $(".zy_goods_top_box").height()
        $(".top_zhanwei_box").css("height", top_h);
    })
</script>

<!-- 内容框 -->
<div class="zy_module-content">
    <form>
        <div class="swiper-container goods_big_box">
            <!-- top nav -->
            <div class="my-pagination"></div>
            <div class="swiper-wrapper">
                <div class="swiper-slide zy_goods_spbox">
                    <!--wrapper图-->
                    <div class="swiper-container xq_goods_pic _picbox_w_h">
                        <ul class="swiper-wrapper">
                            <li class="swiper-slide" th:each="item:${data.goodsGalleryUrls}">
                                <img th:src="${item}"/>
                            </li>
                        </ul>
                        <div class="swiper-pagination sp01"></div>
                        <script>
                            var swiper = new Swiper('.xq_goods_pic', {
                                pagination: '.sp01',
                                paginationClickable: true,
                                autoplay: false,
                                speed: 500,
                                autoplayDisableOnInteraction: false,
                            });
                        </script>
                    </div>

                    <div class="xq_goods_title mb6">
                        <h2 th:text="${data.goodsName}"></h2>
                        <p><a>￥[[${pddUtil.getPrice(minGroupPrice)}]]</a><span>市场价：￥[[${pddUtil.getPrice(data.minGroupPrice)}]]</span>
                        </p>
                        <h3 class="dis_flex">
                            <a>[[${data.hasMallCoupon?"有":"无"}]]店铺券</a><a>[[${data.salesTip}]]人已买</a><a
                                href="javascript:share()" id="copy_btn" data-clipboard-target="#hidShare">分享<img
                                src="/images/web/icon_share.png"></a>
                        </h3>
                    </div>
                    <div class="goods_more_change num">
                        <h2>服务:[[${serviceInfo}]]</h2>
                    </div>
                    <!-- 详情图 -->
                    <div class="goods_xq_miaosu bgwh">
                        <div class="zy_title_con_01">
                            <h2><span>商品详情</span></h2>
                        </div>
                        <div th:utext="${data.goodsDesc}">
                        </div>
                        <div th:each="item:${data.goodsGalleryUrls}">
                            <img th:src="${item}"/>
                        </div>
                    </div>
                </div>
                <div class="swiper-slide zy_goods_xqbox">
                    <div class="xq_info mb6 bgwh">
                        <div class="zy_title_con_01">
                            <h2><span>返利信息<i></i></span></h2>
                        </div>
                        <ul>
                            <li>
                                <span>预计佣金：</span><a>[[${realPayAmount}]] 元</a>
                            </li>
                            <li>
                                <span>已售卖件数：</span><a>[[${data.salesTip}]] 件</a>
                            </li>
                            <li>
                                <span>店铺类型：</span><a>[[${getMerchantType}]]</a>
                            </li>
                            <li>
                                <span>服务分：</span><a>[[${data.servTxt}]]</a>
                            </li>
                            <li>
                                <span>描述分：</span><a>[[${data.descTxt}]]</a>
                            </li>
                            <li>
                                <span>物流分：</span><a>[[${data.lgstTxt}]]</a>
                            </li>
                            <hr>
                            <li>
                                <span>商品是否有优惠券：</span><a>[[${data.hasCoupon?"有":"无"}]]</a>
                            </li>
                            <li>
                                <span>优惠券面额：</span><a>[[${pddUtil.getPrice(data.couponDiscount)}]] 元</a>
                            </li>
                            <li>
                                <span>优惠券门槛金额：</span><a>[[${pddUtil.getPrice(data.couponMinOrderAmount)}]] 元</a>
                            </li>
                            <li>
                                <span>优惠券剩余数量:</span><a>[[${data.couponRemainQuantity}]] 张</a>
                            </li>
                            <li>
                                <span>优惠券总数量:</span><a>[[${data.couponTotalQuantity}]] 张</a>
                            </li>
                            <hr>
                            <li>
                                <span>是否有店铺券:</span><a>[[${data.hasMallCoupon?"有":"无"}]]</a>
                            </li>
                            <li>
                                <span>店铺收藏券面额:</span><a>[[${pddUtil.getPrice(data.cltCpnDiscount)}]] 元</a>
                            </li>
                            <li>
                                <span>店铺收藏券使用门槛价格:</span><a>[[${pddUtil.getPrice(data.cltCpnMinAmt)}]] 元</a>
                            </li>

                            <li>
                                <span>店铺收藏券总量:</span><a>[[${data.cltCpnQuantity}]] 张</a>
                            </li>
                            <li>
                                <span>店铺折扣:</span><a>[[${data.mallCouponDiscountPct}]]</a>
                            </li>
                            <li>
                                <span>最大使用金额:</span><a>[[${data.mallCouponMaxDiscountAmount}]]</a>
                            </li>
                            <li>
                                <span>最小使用金额:</span><a>[[${data.mallCouponMinOrderAmount}]]</a>
                            </li>
                            <li>
                                <span>店铺券余量:</span><a>[[${data.mallCouponRemainQuantity}]]</a>
                            </li>
                            <li>
                                <span>店铺券总量:</span><a>[[${data.mallCouponTotalQuantity}]]</a>
                            </li>
                            <li>
                                <span>店铺参与全店推广:</span><a>[[${data.mallCps eq 1?"是":"否"}]]</a>
                            </li>
                        </ul>

                    </div>
                </div>
            </div>
            <script>
                var swiper = new Swiper('.goods_big_box', {
                    autoHeight: true, //enable auto height
                    pagination: '.my-pagination',
                    paginationClickable: true,
                    paginationBulletRender: function (swiper, index, className) {
                        switch (index) {
                            case 0:
                                name = '商品';
                                break;
                            case 1:
                                name = '返利';
                                break;
                            default:
                                name = '';
                        }
                        return '<a class="' + className + '">' + name + '</a>';
                    }
                });
            </script>

        </div>
        <div class="goods_shux_btn">
            <a href="#">加入购物车</a>
            <a href="#">立即购买</a>
        </div>
    </form>
</div>
<!-- 属性框出现 js-->
<script type="text/javascript">
    $(function () {
        var n = 0;
        $(".goods_more_box h2").mousedown(
            function () {
                n = $(this).index()
                $('.tankuang_box > div.goods_shux_box').eq(n).fadeIn(300)
                $('.tankuang_box > div.goods_shux_box').eq(n).children(".shux").stop().animate({bottom: 0}, 300)
            }
        );
        $(".goods_shux_box .black_bg").mousedown(
            function () {
                $(".goods_shux_box .shux").stop().animate({bottom: -999}, 500)
                $(".goods_shux_box").fadeOut()
            }
        );
        $(".goods_shux_box .goods_pic em ").mousedown(
            function () {
                $(".goods_shux_box .shux").stop().animate({bottom: -999}, 500)
                $(".goods_shux_box").fadeOut()
            }
        );
    })
</script>

<!-- 底部 -->
<div class="zy_goods_foot dis_flex">
    <a href="/">
        <i><img src="/images/web/icon_goods_dp.png"></i>
        <span>首页</span>
    </a>
    <a target="_blank" href="tel://110">
        <i><img src="/images/web/icon_goods_kf.png"></i>
        <span>联系</span>
    </a>
    <a onclick="favorite()">
        <i>
            <img th:if="${isFavorite}" id="favorite_like" src="/images/web/icon_goods_like.png">
            <img th:if="${!isFavorite}" id="favorite_like" src="/images/web/icon_goods_unlike.png">
        </i>
        <span>收藏</span>
    </a>
    <p onclick="buy(1)">拼团 [[${pddUtil.getPrice(minGroupPrice)}]]</p>
    <p><a href="javascript:buy(2)">购买 [[${pddUtil.getPrice(minNormalPrice)}]]</a></p>
</div>
<script src="/js/clipboard.js"></script>

<!-- 返回顶部 -->
<div class="go_top">
    <a class="btn_top"></a>
</div>
<script src="/js/layer/layer.js"></script>
<script type="text/javascript">
    function buy(type) {
        //1拼团 2直接购买
        $.post("/ajax/product/getPrice",
            {type: type, goodsSign: $("#goodsSign").val(), searchId: $("#searchId").val()}
            , function (d) {
                if (d.code == 0) {
                    window.location = d.data;
                } else {
                    alert("系统错误，请联系管理员");
                }
            });
    }

    function favorite() {
        $.post("/ajax/product/myFavorite", {
            goodsName: '[[${data.goodsName}]]',
            goodsImg: '[[${data.goodsThumbnailUrl}]]',
            price: '[[${pddUtil.getPrice(minGroupPrice)}]]',
            goodsId: $("#goodsSign").val(),
            searchId: $("#searchId").val()
        }, function (d) {
            if (d.code == 0) {
                var fa = $("#favorite_like").attr("src");
                if (fa.indexOf("icon_goods_like") > 0) {
                    //喜欢
                    $("#favorite_like").attr("src", "/images/web/icon_goods_unlike.png");
                    layer.msg("取消收藏成功");
                } else {
                    //不喜欢
                    $("#favorite_like").attr("src", "/images/web/icon_goods_like.png")
                    layer.msg("收藏成功");
                }
            } else if (d.code == 1) {
                layer.msg(d.msg);
                window.location.href = d.data;
            } else {
                layer.msg("操作失败");
            }
        })
    }

    //tab层
    function share() {
        $.post("/ajax/product/getShare", {
            goodsSign: $("#goodsSign").val(),
            searchId: $("#searchId").val()
        }, function (d) {
            var obj = d.data[0];
            var data = new Array();
            data.push(obj.qqAppInfo.title);
            data.push(" ");
            // data.push(obj.qqAppInfo.desc);
            data.push(obj.mobileShortUrl);
            var targetUrl = data.join("");
            $("#hidShare").val(targetUrl);
            try {
                navigator.clipboard.writeText(targetUrl).then(function () {
                    layer.msg('复制成功');
                }, function () {
                    layer.msg("复制失败");
                });
            } catch (e) {
                try{
                    $("#hidShare").select(); // 选择对象
                    document.execCommand("Copy"); // 执行浏览器复制命令
                    layer.msg('复制成功');
                }catch(e1){
                    layer.msg("复制失败");
                }
            }
        });

    }

</script>

</body>
</html>